<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车销售数据分析系统</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入Bootstrap图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <link rel="stylesheet" href="/static/dashboard.css">
</head>

<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <div class="sidebar-title">销售分析系统</div>
    </div>
    <div class="nav-menu">
        <a href="#" class="nav-item active" data-page="dashboard">
            <i class="bi bi-speedometer2"></i>
            <span>数据总览</span>
        </a>

        <a href="#" class="nav-item" data-page="manufacturer">
            <i class="bi bi-building"></i>
            <span>厂商分析</span>
        </a>

        <a href="#" class="nav-item" data-page="model">
            <i class="bi bi-car-front"></i>
            <span>车型分析</span>
        </a>

        <a href="#" class="nav-item" data-page="trend">
            <i class="bi bi-graph-up"></i>
            <span>时间趋势</span>
        </a>

        <div class="nav-divider"></div>

        <a href="#" class="nav-item" data-page="search">
            <i class="bi bi-search"></i>
            <span>高级查询</span>
        </a>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <div class="header">
        <div class="welcome">欢迎, {{ username }}!</div>
        <button class="logout-btn" onclick="logout()">
            <i class="bi bi-box-arrow-right"></i> 退出登录
        </button>
    </div>

    <div class="page-content">
        <!-- 仪表盘页面 -->
        <div id="dashboard-page">
            <div class="page-container">
                <div class="page-title">
                    <i class="bi bi-speedometer2"></i> 汽车销售数据总览
                </div>

                <div class="toolbar">
                    <button class="tool-btn">
                        <i class="bi bi-download"></i> 导出数据
                    </button>
                    <button class="tool-btn" onclick="refreshDashboard()">
                        <i class="bi bi-arrow-repeat"></i> 刷新
                    </button>
                </div>

                <div class="chart-container">
                    <div id="chart" style="width:100%; height:100%;"></div>
                    <div id="loading" class="loading">图表数据加载中...</div>
                </div>
            </div>

            <div class="chart-row">
                <div class="chart-col">
                    <div class="page-container">
                        <div class="page-title">
                            <i class="bi bi-trophy"></i> 年度厂商排名
                        </div>

                        <!-- 年份选择器 -->
                        <div class="year-selector">
                            <button class="year-btn active" data-year="2023">2023</button>
                            <button class="year-btn" data-year="2022">2022</button>
                            <button class="year-btn" data-year="2021">2021</button>
                            <button class="year-btn" data-year="2020">2020</button>
                            <button class="year-btn" data-year="2019">2019</button>
                            <button class="year-btn" data-year="2018">2018</button>
                            <button class="year-btn" data-year="2017">2017</button>
                            <button class="year-btn" data-year="2016">2016</button>
                            <button class="year-btn" data-year="2015">2015</button>
                        </div>

                        <div id="ranking-chart" style="height: 400px;"></div>
                    </div>
                </div>

                <div class="chart-col">
                    <div class="page-container">
                        <div class="page-title">
                            <i class="bi bi-pie-chart"></i> 市场份额分析
                        </div>

                        <!-- 添加年份选择器 -->
                        <div class="year-selector" id="market-share-year-selector">
                            <button class="year-btn active" data-year="2023">2023</button>
                            <button class="year-btn" data-year="2022">2022</button>
                            <button class="year-btn" data-year="2021">2021</button>
                            <button class="year-btn" data-year="2020">2020</button>
                            <button class="year-btn" data-year="2019">2019</button>
                            <button class="year-btn" data-year="2018">2018</button>
                            <button class="year-btn" data-year="2017">2017</button>
                            <button class="year-btn" data-year="2016">2016</button>
                            <button class="year-btn" data-year="2015">2015</button>
                        </div>

                        <div id="market-share-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 厂商分析页面 -->
        <div id="manufacturer-page" class="d-none">
            <div class="page-container">
                <div class="page-title">
                    <i class="bi bi-building"></i> 汽车厂商分析
                </div>

                <div class="chart-container">
                    <div id="top15-manufacturer-chart" style="width:100%; height:100%;"></div>
                </div>
            </div>
        </div>

        <!-- 车型分析页面 -->
        <div id="model-page" class="d-none">
            <div class="page-container">
                <div class="page-title">
                    <i class="bi bi-car-front"></i> 车型销售分析
                </div>

                <div class="chart-container">
                    <div id="model-chart" style="width:100%; height:500px;"></div>
                </div>
                
                <div class="toolbar">
                    <select id="funnel-manufacturer-select" class="tool-btn"></select>
                </div>
                <div id="manufacturer-funnel-chart" style="width:100%; height:600px;"></div>

                <div class="page-container" style="margin-top: 30px;">
                    <div class="page-title">
                        <i class="bi bi-graph-up"></i> 前十车型销量趋势（历史）
                    </div>
                    <div id="model-trend-timeline" style="width:100%; height:700px;"></div>
                </div>
            </div>
        </div>

        <!-- 时间趋势页面 -->
        <div id="trend-page" class="d-none">
            <div class="page-container">
                <div class="page-title">
                    <i class="bi bi-graph-up"></i> 销售趋势分析
                </div>
                <!-- 添加图表容器 -->
                <div class="chart-container">
                    <div id="sales-trend-chart" style="width:100%; height:500px;"></div>
                </div>
            </div>
        </div>


        <!-- 高级查询页面 -->
        <div id="search-page" class="d-none">
            <div class="page-container">
                <div class="page-title">
                    <i class="bi bi-search"></i> 高级数据查询
                </div>

                <div class="advanced-query-form">
                    <div class="query-select">
                        <label for="manufacturer-select">选择厂商</label>
                        <select id="manufacturer-select">
                            <option value="">-- 请选择厂商 --</option>
                            <!-- 厂商选项将动态加载 -->
                        </select>
                    </div>

                    <div class="query-select">
                        <label for="model-select">选择车型</label>
                        <select id="model-select" disabled>
                            <option value="">-- 请选择厂商后选择车型 --</option>
                            <!-- 车型选项将动态加载 -->
                        </select>
                    </div>

                    <div class="query-select">
                        <label for="year-select">选择年份</label>
                        <select id="year-select">
                            <option value="">-- 请选择年份 --</option>
                            <!-- 年份选项将动态加载 -->
                        </select>
                    </div>

                    <button class="query-btn" id="query-button">
                        <i class="bi bi-search"></i> 查询数据
                    </button>
                </div>

                <div class="data-loading" id="data-loading">
                    <i class="bi bi-arrow-repeat bi-spin" style="margin-right:10px;"></i> 数据查询中，请稍候...
                </div>

                <div class="error-message" id="error-message"></div>

                <!-- 修改后的结构（按左右分组） -->
                <div class="query-result" id="query-result">
                  <div class="result-header">
                    <i class="bi bi-info-circle" style="margin-right:8px;"></i>
                  </div>

                <div class="query-result" id="query-result">
                  <div class="result-header">
                    <i class="bi bi-info-circle" style="margin-right:8px;"></i> 查询结果
                  </div>

                  <!-- 左侧分组：厂商、车型、年份 -->
                  <div class="result-group-left">
                    <div class="result-item">
                      <div class="result-label">厂商：</div>
                      <div class="result-value" id="result-manufacturer">--</div>
                    </div>
                    <div class="result-item">
                      <div class="result-label">车型：</div>
                      <div class="result-value" id="result-model">--</div>
                    </div>
                    <div class="result-item">
                      <div class="result-label">年份：</div>
                      <div class="result-value" id="result-year">--</div>
                    </div>
                  </div>

                  <!-- 右侧分组：总销量、排名、比去年 -->
                  <div class="result-group-right">
                    <div class="result-item">
                      <div class="result-label">总销量：</div>
                      <div class="result-value" id="result-sales">--</div>
                    </div>
                    <div class="result-item">
                      <div class="result-label">排名：</div>
                      <div class="result-value" id="result-rank">--</div>
                    </div>
                    <div class="result-item">
                      <div class="result-label">比去年：</div>
                      <div class="result-value" id="result-change">--</div>
                    </div>
                  </div>
                </div>
                </div>
        </div>
    </div>
</div>

<!-- 脚本代码 -->
    <script src="/static/dashboard.js"></script>

</body>
</html>